<template>
<div>
  <!-- 
    v-on指令
      作用：绑定事件
      语法：v-on:事件名="函数名"
      注意：函数名必须声明在methods属性(对象)中
   -->
   <button v-on:click="testFn">点我</button>
</div>
</template>
<script>
export default {
  /**
   * vue中声明函数不能随便声明，必须是在vue指定的位置上声明才有效
   * 这个位置就是 和data属性同级位置上的methods属性中
   * 
   * */ 
  data(){
    return {}
  },
  methods: {
    // vue中专门用于声明函数的地方(methods)
    // 对象中的属性值 可以是任意类型 这个是JavaScript语言规定的 这个知识点记住即可。
    // testFn: function(){
    //   console.log("点击了我");
    // },
    // 上面的代码还可以简写成如下：
    testFn(){
      console.log("点击了我 --- 简写");
    }
  }
}
</script>
<style scoped>
</style>